<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css流星雨</title>

<body>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 100vh;
      overflow: hidden;
      animation: animatebg 5s infinite linear;
    }


    span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .1),
        0 0 0 4px rgba(255, 255, 255, .1),
        0 0 20px rgba(255, 255, 255, 1);
      animation: animate 3s linear infinite;

    }


    span::before {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 300px;
      height: 1px;
      background: linear-gradient(90deg, #fff, transparent);
    }

    #container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("/imgage/026.jpg");
      background-size: cover;
      background-position-x: center;


    }

    @keyframes animatebg {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }


    @keyframes animate {
      0% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
      }

      90% {
        opacity: 1;
      }

      100% {
        transform: rotate(315deg) translateX(-1000);
        opacity: 0;
      }
    }
  </style>
</body>

</head>

<body>
  <div id="container">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>


  </div>


</body>

</html>